<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib uri="/WEB-INF/quik_function.tld" prefix="qu"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>咨客_分配技师</title>
		<link href="<c:url value="/resources/css/style.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/default/easyui.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/icon.css" />" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.7.2.js" />"></script>
		<script type="text/javascript" src="<c:url value="/resources/js/jquery.easyui.min.js" />"></script>
		<script type="text/javascript" src="<c:url value="/resources/js/easyui-lang-zh_CN.js" />"></script>
		<script type="text/javascript" src="<c:url value="/resources/js/util.js" />"></script>
		<script type="text/javascript">			
			function onSelectWorker(data){
				onCancelWorker();
				var row = "<tr><td style='width:15%; border: 1px solid #7F9DB9;'>" + data.worker_no + "</td>";
				row += "<td style='width:15%; border: 1px solid #7F9DB9;'>" + data.worker_name + "</td>";
				row += "<td style='width:5%; border: 1px solid #7F9DB9;'>" + data.workerTypeName + "</td>";
				row += "<td style='width:20%; border: 1px solid #7F9DB9;'>";
				if(data.gender == '${gender_man}')
				    row += '男';
				else
					row += '女';
				row += "</td>";
				row += "<td style='width:20%; border: 1px solid #7F9DB9;'>";
				row += "<select id='turnType' name='turnType'>";
				<c:forEach var="code" items="${turnTypeList}">
					row += '<option value="${code.code}">${code.name}</option>';	
				</c:forEach>
				
				row += "</select></td>";				
				row += "<td style='width:17%; border: 1px solid #7F9DB9;'><a href='#' onclick='onDel(this)'>删除</a>";				
				row += "<input type='hidden' name='selWorkerNo' id='selWorkerNo' value='" + data.worker_no + "' />";
				row += "</td>";
				row += "</tr>";
				
				$("#addWorkerTable").append(row);
				$("#rowIndex").val($("#addWorkerTable tr").length);
			}
			
			function onDel(row){				
				$(row).parent().parent().remove();
			}
			
			function onCancelWorker(){				
				var row = $("#addWorkerTable tr").length;
				
				for(var i = row - 1; i >= 1; i--){					
					$("#addWorkerTable").find("tr").eq(i).remove();
				}
				
				trID = 1;
			}

			function onReset(){
				$("#workerNo").val('');
				$("#workerName").val('');
				$("#workerTypeId").combobox("setValue", '-1');				
			}
			
			function onQuery(){				
				$('#workerTable').datagrid({
					url: '../worker/queryWorker.do',
					pageNumber:1,				
					queryParams:{workerTypeId:$("#workerTypeId").combobox('getValue'),						
						workerStatus:'${workerStatus}',
						workerNo:$('#workerNo').val(),
						workerName:$.trim($('#workerName').val())}
				});
			}
		</script>
	</head>
	
	<body>
		<div>			
			<div>
				<table id="workerTable" class="easyui-datagrid"  style="width:570px;height:290px;"
		 			data-options="rownumbers:true,singleSelect:true,toolbar:'#tb', border:true,singleSelect:true,
		 				pagination:true, onClickRow:function(rowIndex, rowData){
 							onSelectWorker(rowData);}">
						<thead>
							<tr>
								<th data-options="field:'worker_no',width:80,align:'center'">技师编号</th>
								<th data-options="field:'worker_name',width:120,align:'center'">技师名称</th>
								<th data-options="field:'workerTypeName',width:120,align:'center'">技师类型</th>
								<th data-options="field:'gender',width:80, align:'center', formatter:function(value){
										if(value == '${gender_man}')
										    return '男';
										else
											return '女';
									}">性别</th>
								<th data-options="field:'status',width:120,align:'center'">状态</th>
							</tr>
						</thead>
					</table>
					
					<div id="tb" style="padding:5px;height:auto">
						<form id="queryRoomTypeForm" name="queryRoomTypeForm" action="queryRoomType" method="post">
						<div>
							技师编号: <input class="easyui-validatebox" name="workerNo" id="workerNo" style="width:100px">
							&nbsp;&nbsp;&nbsp;&nbsp;
							技师名称: <input class="easyui-validatebox"  type="text" name="workerName" id="workerName"  style="width:100px"/>
							&nbsp;&nbsp;&nbsp;&nbsp;
							技师类型: 
							<select id="workerTypeId" name="workerTypeId" class="easyui-combobox" data-options="panelHeight:'auto'">
								<option value="-1" selected="selected">所有</option>
								<c:forEach var="code" items="${workerTypeList}">
									<option value="${code.id}">${code.worker_type_name}</option>	
								</c:forEach>
							</select>							
							<br/>
							<a href="#" class="easyui-linkbutton" style="margin-left: 420px; margin-top: 5px;" id="searchBtn" style="text-align: center" onclick="onQuery()">查询</a>
							<a href="#" class="easyui-linkbutton" id="resetBtn" style="text-align: center" onclick="onReset()">清空</a>
						</div>
						</form>
					</div>
				</div>
			</div>
			
			<div id="addWorkerDIV" style="margin-top: 5px; height:50px; ">
				<table id="addWorkerTable" style="border-collapse: collapse;width:568px;text-align: center;">
					<tr>
						<td style="width:15%; border: 1px solid #7F9DB9;">技师编号</td>
						<td style="width:15%; border: 1px solid #7F9DB9;">技师名称</td>						
						<td style="width:20%; border: 1px solid #7F9DB9;">技师类型</td>
						<td style="width:20%; border: 1px solid #7F9DB9;">技师性别</td>
						<td style="width:10%; border: 1px solid #7F9DB9;">起钟方式</td>										
						<td style="width:15%; border: 1px solid #7F9DB9;">操作</td>
					</tr>	
				</table>
			</div>
			<input type="hidden" name="rowIndex" id="rowIndex" />
	</body>
</html>